<template>
    <div class="article">
       <!--面包屑分类导航-->
      <Card>
        <div class="type">
          <p slot="title">
            <Breadcrumb>
                <BreadcrumbItem to="/">
                    <Icon type="ios-home-outline"></Icon>
                    关于作者
                </BreadcrumbItem>
                <BreadcrumbItem to="/articles">
                    <Icon type="logo-buffer"></Icon>
                    全部文章
                </BreadcrumbItem>
            </Breadcrumb>
          </p>
        </div>
        <!--显示小标签-->
        <div>
            <Tag v-for="item in article.tag" :key="item" style="margin-top: 10px">
                  <div>{{item}}</div>
            </Tag>
        </div>

        <!--文章详情-->
        <div>
            <h2>{{article.title}}</h2>
            <p class="article-p">作者：admin</p>
            <!--显示HTML内容-->
            <div v-html="article.text" class="article-text">
            </div>
          <p class="article-p" style="margin-top: 20px"> {{Date(article.time)}}</p>
        </div>
        <!--收藏-->
        <span>
            <Button v-on:click="collection(article.a_id)" type="text" style="margin-top: 5px">
                <Icon type="ios-heart"/>收藏
            </Button>
        </span>
      </Card>
        <!--评论详情-->
        <div class="type">
            <Divider/>
            <List item-layout="vertical">

                <ListItem v-for="talk in articleTalk" :key="talk.talk">
                  <Card>
                      {{talk.username}}
                    <hr style="margin-bottom: 13px">
                    {{talk.talk}}
                  </Card>
                </ListItem>
            </List>
        </div>
        <!--评论-->
        <Talk :a_id="article.a_id"></Talk>
    </div>
</template>

<script>
    import Talk from '../components/Talk'

    export default {
        name: 'article',
        components: {
            Talk
        },
        data() {
            return {
                article: {},
                articleTalk: []
            }
        },
        created: function () {
            if ('id' in this.$route.params) {
                let id = this.$route.params.id
                console.log(this.$route.params.id)
                //获取文章
                this.$api.get('getArticle/' + id).then((res) => {
                    if (res.code === 0) {
                        this.article = res.data
                        console.log(this.article)

                    } else {
                        this.info(res.message)
                    }
                    //编写为方法，供子组件调用
                    this.getArticleTalk(id)
                })
            }
        },
        methods: {
            info(text) {
                this.$Notice.info({
                    title: '提示',
                    desc: text
                });
            },
            getArticleTalk(id) {
                //    获得所有评论
                this.$api.get('getArticleTalk/' + id).then((res) => {
                    this.articleTalk = res.data
                    console.log(this.articleTalk)
                })
            },
            //收藏该文章
            collection(id) {
                this.$api.get('users/user/save/' + id).then((res) => {
                    this.info(res.message)
                })
            },
        },
    }
</script>
<style>
    .type {
        text-align: left;
    }

    .article {
        padding: 40px 10vw 40px 10vw;
    }

    .article-p {
        color: #ababab;
    }

    .article h2 {
        padding: 20px;
    }

    .article-text {
        padding: 20px 10vw 20px 10vw;
    }
</style>
